<template>
  <div class="page-container page-container-detail-page">
    <!-- 面包屑 -->
    <div class="breadcrumb ">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销中心</el-breadcrumb-item>
        <el-breadcrumb-item>拼团</el-breadcrumb-item>
        <el-breadcrumb-item>拼团活动详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--审核弹框-->
    <el-dialog title="管理员备注" class="el-dialog-style" :visible.sync="dialogVisibleAdmin" :close-on-click-modal="false" @closed="closedAuditDialog">
      <el-form :model="adminDataForm" :rules="adminDataFormRules" ref="adminDataForm" label-width="100%" :size="size" label-position="right" inline>
        <el-form-item prop="auditRemark" class="textarea">
            <el-input type="textarea" placeholder="请输入备注" v-model="adminDataForm.auditRemark" :rows="4"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" type="primary" plain @click.native="submitFormAdminNotPass" class="cancelButton" >不通过</el-button>
        <el-button :size="size" type="primary" @click.native="submitFormAdmin" class="searchButton">通过</el-button>
      </div>
    </el-dialog>

    <!-- 互斥活动详情 -->
    <el-dialog :visible.sync="mutexPromotionVisible" title="添加商品" width="70%" :close-on-click-modal="false">
      <div>
        <el-table :data="mutexPromotionList" ref="multipleTable" :row-class-name="tableRowClassName"  :size="size">
          <el-table-column prop="promotionCode" width="280" label="互斥活动编码" sortable align="center"></el-table-column>
          <el-table-column prop="promName"  width="150" label="互斥活动名称" align="center">
              <template slot-scope="scope">
              <el-button @click="linkInfoByMutexProduct(scope.row.promotionId,scope.row.promType)" type="text" class="textButton" size="small">{{scope.row.promName}}</el-button>
              </template>
          </el-table-column>
          <el-table-column prop="goodsCategory"  width="350" label="互斥活动时间" align="center">
            <template slot-scope="scope">
                <span>{{scope.row.startTime}} - {{scope.row.endTime}}</span>
              </template>
          </el-table-column>
          <el-table-column prop="storeName" label="活动状态" align="center">
            <template slot-scope="scope">
              <span class="color333 font18" v-if="scope.row.status == 0">待提交</span>
              <span class="color333 font18" v-else-if="scope.row.status == 1">待提交</span>
              <span class="color333 font18" v-else-if="scope.row.status == 2">待审核</span>
              <span class="color333 font18" v-else-if="scope.row.status == 3">未开始</span>
              <span class="color333 font18" v-else-if="scope.row.status == 4">审核不通过</span>
              <span class="color333 font18" v-else-if="scope.row.status == 5">进行中</span>
              <span class="color333 font18" v-else-if="scope.row.status == 6">已过期</span>
              <span class="color333 font18" v-else-if="scope.row.status == 7">已关闭</span>
              <span class="color333 font18" v-else-if="scope.row.status == 8">已结束</span>
              <span class="color333 font18" v-else-if="scope.row.status == 9">活动草稿</span>
            </template>
          </el-table-column>
          <el-table-column prop="creatorName" label="创建人" align="center"></el-table-column>
          <el-table-column prop="deptName"  label="创建组织" align="center"></el-table-column>
        </el-table>
        <!--分页栏-->
        <div class="toolbar t_r">
          <el-pagination
            @size-change="mutexPromotionListSizeChange"
            @current-change="mutexPromotionListCurrentChange"
            :current-page="mutexPromotionForm.start"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="mutexPromotionForm.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="mutexPromotionListTotal"
          ></el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer t_c">
        <el-button type="primary" plain :size="size" @click.native="mutexPromotionVisible = false" class="searchButton">关闭</el-button>
      </div>
    </el-dialog>

    <!--工具栏-->
    <div class="page-container-detail">
      <p class="pageName">拼团活动详情</p>
      <div class="toolbar">
        <el-form :inline="true" :model="filters" :size="size" ref="filters" class="border" style="margin-bottom: 15px;">
          <div style="width: 100%;">
            <el-form-item>
              <span class="color333 font18">活动名称：</span>
              <span class="color333 font18">{{filters.promName}}</span>
            </el-form-item>
            <el-form-item>
              <span class="color333 font18">活动ID：</span>
              <span class="color333 font18">{{filters.groupCode}}</span>
            </el-form-item>
            <el-form-item>
              <span class="color333 font18">当前状态：</span>
              <span class="color333 font18" v-if="filters.status == 9">活动草稿</span>
              <span class="color333 font18" v-else-if="statusFormat(filters) == 11">待提交</span>
              <span class="color333 font18" v-else-if="statusFormat(filters) == 12">待审核</span>
              <span class="color333 font18" v-else-if="statusFormat(filters) == 13">未开始</span>
              <span class="color333 font18" v-else-if="statusFormat(filters) == 14">审核未通过</span>
              <span class="color333 font18" v-else-if="statusFormat(filters) == 15">进行中</span>
              <span class="color333 font18" v-else-if="statusFormat(filters) == 16">已过期</span>
              <span class="color333 font18" v-else-if="statusFormat(filters) == 17">已结束</span>
              <span class="color333 font18" v-else-if="filters.status == 7">已关闭</span>
            </el-form-item>
          </div>
        </el-form>
          <!-- 审核按钮 -->
           <el-form :inline="true" :model="filters" :size="size" ref="filters" style="text-align: center;">
             <el-row class="search-button">
                <!-- 待提交 db状态1, 转化状态11-->
                <kt-button  class="searchButton" :size="size" @click="shenheHuodong(0)" v-if="statusFormat(filters) == 11 || statusFormat(filters) == 14" v-show="filters.editFlag" perms="market:groupon:submit" label="提交审核"></kt-button>
                <!-- 待审核 db状态2, 转化状态12-->
                <kt-button  class="searchButton" :size="size" @click="shenheHuodong(1)" v-if="statusFormat(filters) == 12" v-show="filters.editFlag" perms="market:groupon:verify" label="审核"> </kt-button>
                <kt-button  class="resetButton" :size="size" @click="templateDialogVisible=true" v-show="filters.editFlag" perms="market:groupon:addtemp" label="保存模板"></kt-button>
             </el-row>

           </el-form>
        </div>
          <div class="tab-container tab-container-noPadding">
            <el-tabs type="border-card">

              <!-- 促销规则部分tab -->
              <el-tab-pane label="促销规则">
                  <div>
                      <form class="form-horizontal ">

                        <!-- 基本信息部分 -->
                        <div class="basicInfo">基本信息：</div>
                        <!--活动名称-->
                        <div class="form-group">
                          <label class="color333 font16 ml8" ng-show="promotionDetailContent.promotionMethod != 17">活动名称：</label>
                          <div class="color333">{{filters.promName}}</div>
                        </div>
                        <!--活动时间-->
                        <div class="form-group">
                          <label class="color333 font16 ml8" >活动日期：</label>
                          <div class="color333">
                              {{filters.startTime}} 至  {{filters.endTime}}
                          </div>
                        </div>
                        <div class="form-group">
                          <label class="color333 font16 ml8" >活动搜索词：</label>
                          <div class="color333">{{filters.searchKeyword}}</div>
                        </div>
                        <div class="form-group">
                          <label class="color333 font16 ml8" >活动费用预算：</label>
                          <div class="color333">{{filters.budget}} 元</div>
                        </div>
                        <div class="form-group">
                          <label class="color333 font16 ml8" >预警比例：</label>
                          <div class="color333" v-if="filters.warningNum">{{filters.warningNum}} %</div>
                        </div>
                        <!-- 活动规则部分 -->
                        <div class="basicInfo">活动规则：</div>
                        <!--预热时间-->
                        <div class="form-group" >
                          <label class="color333 font16 ml8" >预热时间：</label>
                          <div class="color333">
                            {{filters.preheatTime}}
                          </div>
                        </div>
                        <div class="form-group">
                          <label class="color333 font16 turnInlineBlock  ml8" >团单时长：</label>
                          <div class="color333">
                            <span v-if="filters.groupTimeType == '0'">不限制</span>
                            <span v-if="filters.groupTimeType == '1'">{{filters.groupTimeLimit}}小时</span>
                          </div>
                        </div>
                        <div class="form-group">
                          <label class="color333 font16 ml8" >自动成团设置：</label>
                          <div class="color333">
                            距结束{{filters.autoCompleteTime}}小时未成团自动成团
                          </div>
                        </div>
                        <div class="form-group-s">
                          <label class="color333 font16 ml8" >单用户参团限制：</label>
                          <div class="color333">
                            <span v-if="filters.individualJoinType == '0'">不限制</span>
                            <span v-if="filters.individualJoinType == '1'">{{filters.individualJoinTime}}次</span>
                          </div>
                        </div>
                        <div class="form-group">
                          <label class="color333 font16 ml8" >拼团人数：</label>
                          <div class="color333">
                            {{filters.groupMembers}}人
                          </div>
                        </div>
                        <div class="form-group">
                          <label class="color333 font16 t_r w128" >活动图片：</label>
                          <div class="color333">
                            <div class="img-card" v-for="(item, index) in imgUrlList" :key="index">
                              <el-image :src="item.url" style="width: 100%;height: 100%;"/>
                            </div>
                          </div>
                        </div>
                        <!-- 参与条件 -->
                        <div class="basicInfo">交易规则：</div>
                        <!-- 是否分摊 -->
                        <div class="form-group">
                          <label class="color333 font16 ml8" >是否分摊：</label>
                          <div class="color333">
                            <span v-if="filters.costAllocationFlag =='0'">否</span>
                            <span v-if="filters.costAllocationFlag =='1'">是</span>
                          </div>
                        </div>

                        <!-- 参与条件 -->
                        <div class="basicInfo">参与条件：</div>
                        <div class="form-group">
                          <label class="color333 font16 ml8" >开团对象限制：</label>
                          <div v-for='(item,index)  in filters.customerLimit' class="color333" :key="index">
                            <span v-if='item ==0'>全部</span>
                            <span v-if='item ==1'>新用户</span>
                            <span v-if='item ==2'>老用户</span>
                          </div>
                        </div>
                        <div class="form-group">
                          <label class="color333 font16 ml8" >参团对象限制：</label>
                          <div v-for='(item,index)  in filters.offeredCustomerLimit' class="color333" :key="index">
                              <span v-if='item ==0'>全部</span>
                              <span v-if='item ==1'>新用户</span>
                              <span v-if='item ==2'>老用户</span>
                          </div>
                        </div>
                        <div class="form-group" v-if="filters.memTypes != null">
                          <label class="color333 font16 ml8">会员类型：</label>
                          <div class="color333">
                            <span
                              v-for="item in (filters.memTypes + '').split(
                                ','
                              )"
                              :key="item"
                              class="ng-binding ng-scope"
                            >
                              <span v-if="item == 1">
                              普通会员 &nbsp;
                              </span>
                              <span v-if="item == 2">
                              we2000 &nbsp;
                              </span>
                              <span v-if="item == 2">
                              分期会员 &nbsp;
                              </span>
                            </span>
                          </div>
                        </div>
                        <div class="form-group" v-if="filters.channelId != null">
                          <label class="color333 font16 ml8">渠道入口：</label>
                          <div class="color333">
                            <span
                              v-for="item in (filters.channelId + '').split(
                                ','
                              )"
                              :key="item"
                              class="ng-binding ng-scope"
                            >
                              <span v-if="item == 1">
                              企业微信 &nbsp;
                              </span>
                              <span v-if="item == 2">
                              xxx &nbsp;
                              </span>
                              <span v-if="item == 2">
                              yyy &nbsp;
                              </span>
                            </span>
                          </div>
                        </div>
                        <div class="form-group">
                          <label class="color333 font16 ml8">备注：</label>
                          <div class="color333">
                            {{filters.remark}}
                          </div>
                        </div>
                      </form>
                  </div>
              </el-tab-pane>

              <!-- 参与商品部分tab -->
              <el-tab-pane label="参与商品">

                <el-tabs type="border-card">

                  <el-tab-pane :label="noMutexProductLabel">
                    <el-row class="search-button-fix">
                  </el-row>
                    <div>
                      <!-- 已选商品 -->
                      <el-table :data="merchantProductTableData"

                        row-key="id"
                        default-expand-all
                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                        @selection-change="handleSelectionChange"
                        class="tableStyle">
                        <el-table-column align='left' prop="thirdSpuSkuId" label="商品编码" width="180"></el-table-column>
                        <el-table-column align='center' prop="mpName" label="商品名称" width="180"></el-table-column>
                        <el-table-column align='center' prop="categoryName" label="商品分类" ></el-table-column>
                        <el-table-column align='center' prop="storeName" label="所属商户"></el-table-column>
                        <el-table-column align='center' prop="salePriceScope" label="原价（元）"></el-table-column>
                        <el-table-column align='center' prop="grouponPrice" label="拼团价（元）"></el-table-column>
                        <el-table-column align='center' prop="parentAllocationScale" v-if="filters.costAllocationFlag =='1'" label="平台分摊">
                          <template slot-scope="scope">
                            {{scope.row.parentAllocationScale != null && scope.row.parentAllocationScale != '' ? scope.row.parentAllocationScale : '-'}}
                          </template>
                        </el-table-column>
                        <el-table-column align='center' prop="merchantAllocationScale" v-if="filters.costAllocationFlag =='1'" label="商户分摊">
                          <template slot-scope="scope">
                            {{scope.row.merchantAllocationScale != null && scope.row.merchantAllocationScale != '' ? scope.row.merchantAllocationScale : '-'}}
                          </template>
                        </el-table-column>
                        <el-table-column align='center' prop="stockLimit" label="活动库存">
                          <template slot-scope="scope">
                            {{scope.row.stockLimit != null && scope.row.stockLimit != '' ? scope.row.stockLimit : '-'}}
                          </template>
                        </el-table-column>
                        <el-table-column align='center' prop="individualLimit" label="个人限购">
                          <template slot-scope="scope">
                            {{scope.row.individualLimit != null && scope.row.individualLimit != '' ? scope.row.individualLimit : '-'}}
                          </template>
                        </el-table-column>
                        <el-table-column align='center' prop="orderLimit" label="订单限购">
                          <template slot-scope="scope">
                            {{scope.row.orderLimit != null && scope.row.orderLimit != '' ? scope.row.orderLimit : '-'}}
                          </template>
                        </el-table-column>

                      </el-table>
                      <div class="t_r">
                        <el-pagination
                          @size-change="mainProductHandleSizeChange"
                          @current-change="mainProductHandleCurrentChange"
                          :current-page="mainProductForm.start"
                          :page-sizes="[10,20,30,40]"
                          :page-size="mainProductForm.limit"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="merchantProductTableDataTotal">
                        </el-pagination>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane :label="mutexProductLabel">
                    <div>
                      <el-table :data="mutexProductList"  row-key="id" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="width: 100%" @selection-change="handleSelectionChange" class="tableStyle">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="mpCode" label="商品编码" width="200"  align="left"></el-table-column>
                        <el-table-column prop="mpName" label="商品名称" width="200"></el-table-column>
                        <el-table-column prop="categoryName" label="商品分类" width="200"></el-table-column>
                        <el-table-column prop="stock" label="库存" width="200"></el-table-column>
                        <el-table-column prop="salePriceScope" label="原价（元）" width="200"></el-table-column>
                        <el-table-column prop="storeName" label="所属商户" width="200"></el-table-column>
                        <el-table-column align="center" fixed="right" label="操作" width="400">
                          <template slot-scope="scope">
                        <el-button @click="getMutexInfo(scope.row)" v-if="scope.row.typeOfProduct==20" type="text" class="textButton" size="small">查看详情</el-button>
                        <!-- <el-button @click="renewAdd(scope.row)" v-if="scope.row.typeOfProduct==10 || scope.row.typeOfProduct==20" type="text" class="textButton" size="small">重新添加</el-button> -->
                          </template>
                        </el-table-column>
                      </el-table>
                      <div class="toolbar" >
                        <el-pagination
                          @size-change="handleSizeChangeMutexProductList"
                          @current-change="handleCurrentChangeMutexProductList"
                          :current-page="mutexProductForm.start"
                          :page-sizes="[10, 20, 30, 40]"
                          :page-size="mutexProductForm.limit"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="mutexProductTotal"
                        >
                        </el-pagination>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>

              </el-tab-pane>

            </el-tabs>
          </div>
        </div>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { darkmagenta } from 'color-name';
import tabPane from './components/TabPaneCreateGroupon'
import qs from 'qs';

export default {
  name: 'Tab',
  components: {
    tabPane ,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      deptType:localStorage.getItem("deptType"),//当前登录用户所属组织类型
      adminDataForm:{
        auditRemark:""
      },

      adminDataFormRules : {
        auditRemark : [{ required: true, message: "审核意见不能为空！", trigger: "change" }]
      },

      dialogVisibleAdmin: false,
      shenhe:0,
      data:{status:0},
      size: "small",

      searchMerchantProductFlag: false,
      mainProductForm: {
        merchantId: null,
        mpCode: null,
        mpName: null,
        categoryName: null,
        promotionId: null,
        start:1,
        limit:10,
        orderBys:{
          "f":"create_time",
          "s":"desc"
        }
      },

      merchantProductTableData: [],
      merchantProductTableDataTotal:0,

      multipleSelection: [],
      mainProductListObject :{mainProductList:[]},
      activityData: {},
      // 子平台列表  活动渠道
      spanChannelCodesList: [],
      // 标签名称
      spanTagName: "",
      filters: {
        "id":"",
        "groupCode": "",
        "status":"",
        "editFlag":false,
        // "promType":1,//单一促销
        "promName": "",
        "preheatTime": null,
        "costAllocationFlag": null,
        "parentAllocationScale": null,
        "childAllocationScale": null,
        "merchantAllocationScale": null,
        "storeAllocationScale": null,
        "frontPromType": 2,
        "foldingFlag": 1,
        "overLimitRule": 2,
        "channelCodes": [],
        "customerLimit": "0",
        "offeredCustomerLimit": "0",
        "labelId": null,
        // "tagName": "",
        "remark": "",
        "auditRemark": "",
        "proPlatform": [1],
        "proUserType": [1],
        "proMemberType": [1],
        "proMemberLevel": [2],
        "createMerchantId":11,
        "createMerchantName":"wys",
        "contentType":1,
        "creator":1,
        "creatorName":"admin",
        "updator":1,
        "updatorName":"admin",
        "groupMembers":"",
        "groupType":"0",
        "groupTimeType":"0",
        "groupTimeLimit":"",
        "autoCompleteTime":"",
        "individualJoinType":"0",
        "individualJoinTime":"",
        "mailType":"0",
        "startTime": "",
        "endTime": "",
        "fileUrl":"https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E6%8B%BC%E5%9B%A2%E6%B4%BB%E5%8A%A8%E5%9B%BE%E7%89%87&step_word=&hs=2&pn=0&spn=0&di=181610&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=1564405255%2C2033570230&os=4151028045%2C4024279481&simid=4269565477%2C911268859&adpicid=0&lpn=0&ln=1387&fr=&fmq=1579251110715_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fimage.xghylt.com%2Fforum%2F201712%2F21%2F110528yqdenajc52jhjj7h.jpg.thumb.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fks52_z%26e3Bftgw_z%26e3Bv54_z%26e3BvgAzdH3FfAzdH3Fks52_80jc8c91da8adxwf6_z%26e3Bip4s&gsm=&rpstart=0&rpnum=0&islist=&querylist=&force=undefined"
      },


      //-----------setp2###start

      //第一步添加成功赋值
      //外部赋值-----------------start
      promotionId:"1",
      auth:0,
      //外部赋值-----------------start

      promotion:{
        //促销id
        id:"",
        promotionId:"",
        merchantType:"1",
      },
      pomotionListObject:{pomotionList:[]},

      noMutexProductLabel:"生效商品（0）",
      mutexProductForm:{
        promotionId: this.$route.params.id,
        mutexFlag:1,//互斥标识
        start: 1,
        limit: 10
      },
      mutexProductList:[],
      mutexProductTotal:0,
      mutexProductLabel:"互斥商品（0）",
      showButtons:true,
      mutexPromotionForm:{
        promotionId: this.$route.params.id,
        promType: 10,
        start:1,
        limit:10,
      },
      mutexPromotionList:[],
      mutexPromotionListTotal:0,
      mutexPromotionVisible:false,
      batchRenewAddSelection:[],
      levelList: [],
      // 活动图片
      imgUrlList :[],
    };
  },
  methods: {
    /**
     * 状态格式化
     */
    statusFormat(row){
        if (row.status == 1 && new Date().getTime() <= new Date(row.startTime).getTime()) {
          //待提交
          return 11;
        } else if (row.status == 2 && new Date().getTime() <= new Date(row.startTime).getTime()) {
          //待审核
          return 12;
        } else if (row.status == 11 && new Date().getTime() <= new Date(row.startTime).getTime()) {
          //未开始
          return 13;
        } else if (row.status == 4 && new Date().getTime() <= new Date(row.startTime).getTime()) {
          //审核未通过
          return 14;
        } else if (row.status == 11 && new Date().getTime() >= new Date(row.startTime).getTime() && new Date().getTime() <= new Date(row.endTime).getTime()) {
          //进行中
          return 15;
        } else if ((row.status == 1 || row.status == 2 || row.status == 4) && new Date().getTime() > new Date(row.startTime).getTime()) {
          //已过期
          return 16;
        } else if (row.status == 11 && new Date().getTime() > new Date(row.endTime).getTime()) {
          //已结束
          return 17;
        }
    },

    // 清除上次的校验提示
    clearValidateProp(formName, prop) {
      this.$refs[formName].clearValidate(prop);
    },

    // 重置表单
    resetForm(formName) {
      let this_ =this;
      if (this_.$refs[formName] != undefined) {
        this_.$refs[formName].resetFields();
      }
    },


    // 回显数据-活动详情
    themeDetailFind(){
      let param={};
      param.id = this.$route.query.id;
      let callback = res => {
        if (res.code == "0000") {
          this.filters.id = res.data.id;
          this.filters.groupCode = res.data.groupCode;
          this.filters.promName = res.data.promName;
          this.filters.startTime = res.data.startTime;
          this.filters.endTime = res.data.endTime;
          this.filters.searchKeyword = res.data.searchKeyword;
          this.filters.budget = res.data.budget;
          this.filters.warningNum = res.data.warningNum;
          this.filters.status = res.data.status;
          this.filters.channelId = res.data.channelId;
          // 预热时间
          this.filters.preheatTime = res.data.preheatTime;

          // 活动图片
          if(res.data.fileUrl && res.data.fileUrl.length > 0){
            res.data.fileUrl.forEach(item=>{
              this.imgUrlList.push({"url":item});
            });
          }
          

          this.filters.costAllocationFlag =res.data.costAllocationFlag;
          this.filters.groupTimeType = res.data.groupTimeType.toString();
          if(this.filters.groupTimeType=="1"){
            this.filters.groupTimeLimit = res.data.groupTimeLimit;
          }
          this.filters.autoCompleteTime = res.data.autoCompleteTime;
          this.filters.individualJoinType = res.data.individualJoinType.toString();
          this.filters.individualJoinTime = res.data.individualJoinTime;
          this.filters.mailType = res.data.mailType.toString();
          // 子平台列表
          this.filters.channelCodes = res.data.channelCodes;
          this.filters.groupMembers = res.data.groupMembers;
          this.filters.groupType = res.data.groupType.toString();
          // this.filters.proUserType = res.data.proUserType;
          this.filters.proUserType = (res.data.proUserType + "").split(",");
          // this.filters.customerLimit = res.data.customerLimit.toString();
          this.filters.customerLimit = (res.data.customerLimit + "").split("|");
          // this.filters.offeredCustomerLimit = res.data.offeredCustomerLimit.toString();
          this.filters.offeredCustomerLimit = (res.data.offeredCustomerLimit + "").split("|");
          this.filters.remark = res.data.remark;
          
          this.filters.editFlag = res.data.editFlag;
          this.data.status = res.data.status;
          this.filters.description = res.data.description;

          this.filters.labelId = Number(res.data.labelId);
          this.filters.memTypes = res.data.memTypes;
          this.filters.promotionMemberGradeList = res.data.promotionMemberGradeList;
        }
      };
      this.utils.request.patchGrouponDetail(param, callback);
    },

    // 审核不通过
    submitFormAdminNotPass(){
      let callback = res => {
        this.$message({message:"审核成功",type:"success"});
        // 修改显示状态
        this.$set(this.filters,"status",4);
        this.themeDetailFind();
      };
      this.adminDataForm.id = this.promotionId;
      //  更新活动状态 审核不通过
      // 7 -> 4  活动状态
      this.adminDataForm.status = 4;
      this.$refs['adminDataForm'].validate(valid => {
        if (valid) {
          this.utils.request.patchGrouponUpdate(this.adminDataForm, callback);
          // 去掉审核按钮
          this.shenhe = 2;
          this.dialogVisibleAdmin = false;
        }
      });
    },

    // 审核通过
    submitFormAdmin(){
      this.dialogVisibleAdmin = false;

      let callback = res => {
        this.$message({message:"审核成功",type:"success"});
        // 修改显示状态
        this.$set(this.filters,"status",11);
        this.themeDetailFind();
      };
      this.adminDataForm.id = this.promotionId;
      //  更新活动状态  审核通过
      //  4 ->  3 -> 11活动状态
      this.adminDataForm.status = 11;
      this.utils.request.patchGrouponUpdate(this.adminDataForm, callback);

      // 去掉审核按钮
      this.shenhe = 2;
    },

    // 提交审核
    shenheHuodong(flag){
      if(flag == 0){
        this.$confirm("确认提交审核？", "提示", {
          type: "warning",
          closeOnClickModal: false,
        })
          .then(() => {
            // this.shenhe = 1;

            let callback = res => {
              if(res.code =="0000"){
                this.$message({message:"提交审核成功",type:"success"});
                this.shenhe = 1;
                // 修改显示状态
                this.$set(this.filters,"status",2);
                this.themeDetailFind();
              }else {
                this.$message({message: res.msg, type: "warning"});
              }
            };
            let param ={};
            param.promotionId    =this.promotionId;
            //  更新活动状态  待审核
            //  6 ->2 活动状态
            param.status         =2;
            this.utils.request.updateGroupPromotionStatus(param,callback);

          })
          .catch(() => {
          });
      }else{
        // this.shenhe = 2;
        this.dialogVisibleAdmin = true;
      }
    },


    closedAuditDialog(){
      this.clearValidateProp('adminDataForm','auditRemark');
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    revokeProduct() {
      let this_ = this;
      let callback = function(res) {
        if (res.code == "0000") {
          this_.getMerchantProductList();
        } else {
          //alert("修改失败");
        }
      };
      if (this.multipleSelection.length > 0) {
        this.mainProductListObject.mainProductList.splice(0,this.mainProductListObject.mainProductList.length);
        for (let i = 0; i < this.multipleSelection.length; i++) {
          let temp = {};
          temp.promotionId = this.multipleSelection[i].promotionId;
          temp.mpId = this.multipleSelection[i].mpId;
          this.mainProductListObject.mainProductList.push(temp);
        }
        this.utils.request.groupProductDeleteProductBatch(this.mainProductListObject, callback);
      } else {
        this.$message({message: "操作失败, 请选择要撤出的商品",type: "error"});
      }
    },


    createPage(){
      this.$router.push("/CreatePromotion");
    },


    //------setp2###start
    promotionMerchantSaveBatch2(){
      this.pomotionListObject.pomotionList.splice(0,this.pomotionListObject.pomotionList.length);

      for (var i = 0; i < this.addSelection.length; i++) {
        var temp = {};

        temp.promotionId = this.promotionId;
        temp.merchantId =  this.addSelection[i].id;
        temp.merchantType = "1";
        temp.merchantName = this.addSelection[i].name;
        temp.merchantTypeManager=this.addSelection[i].merchantType;
        temp.orgNumber=this.addSelection[i].orgNumber;
        temp.name = this.addSelection[i].name;

        this.pomotionListObject.pomotionList.push(temp);
      }
      let callback = res => {
        if (res.code == "0000") {
          this.mainMerchantForm.merchantType="1";
          this.mainMerchantFormFind();
        }
      };

      var  this__= this;
      this.utils.request.promotionMerchantSaveBatch2(this.pomotionListObject, callback );

    },
    getMerchantProductList(){
      let callback2 = res => {
        if (res.code == "0000") {
          this.merchantProductTableData = res.data.rows;
          this.merchantProductTableDataTotal = res.data.total;
        }
      };
      let param2 ={};
      param2.promotionId = this.$route.query.id;
      param2.start=1;
      param2.limit=10;
      // this.utils.request.groupProductList(param2, callback2);
      this.utils.request.groupProductListV2(param2, callback2);

      let  this_= this;
      this_.utils.request.groupProductSkuCount(param2, function( res) {
        if (res.code == "0000") {
          if(res.data>9999){
            this_.noMutexProductLabel = "生效商品（9999+）";
          }else{
            this_.noMutexProductLabel = "生效商品（"+res.data+"）";
          }
        }
      });
    },


    // 查询促销商品
    mainProductTableDataFormFind(startFlag){
      this.mainProductForm.promotionId=this.promotionId;

      if (startFlag == undefined || startFlag != 1) {
        this.mainProductForm.start =1;
      }
      let  this_= this;
      // this_.utils.request.groupProductList(this.mainProductForm, function (resp) {
      this_.utils.request.groupProductListV2(this.mainProductForm, function (resp) {
        if (resp.code == "0000") {
          var ttt = [];
          $.each(resp.data.rows, function (index, value) {

            value.disabled=true;
            ttt.push(value);
          });


          this_.merchantProductTableData = ttt;
          this_.merchantProductTableDataTotal = resp.data.total;
        }
      });

      this_.utils.request.groupProductSkuCount(this.mainProductForm, function( res) {
        if (res.code == "0000") {
          if(res.data>9999){
            this_.noMutexProductLabel = "生效商品（9999+）";
          }else{
            this_.noMutexProductLabel = "生效商品（"+res.data+"）";
          }
        }
      });
    },

    /**
     * 每页条数刷新
     */
    mainProductHandleSizeChange(val){
      this.mainProductForm.limit = val;
      this.mainProductTableDataFormFind(1);
    },
    /**
     * 换页刷新
     */
    mainProductHandleCurrentChange(val){
      this.mainProductForm.start = val;
      this.mainProductTableDataFormFind(1);
    },
    //------setp2###end

    //table的双色条纹
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },


    /**
     * 查询互斥商品
     */
    getMutexProductList() {
      var this_ = this;
      this.mutexProductForm.promotionId = this.promotionId;
      this_.utils.request.groupProductListV2(this.mutexProductForm, function(res) {
        if (res.code == "0000") {
          this_.mutexProductList = res.data.rows==null?[]:res.data.rows;
          this_.mutexProductTotal = res.data.total;
        }
      });

      this_.utils.request.groupProductSkuCount(this.mutexProductForm, function( res) {
        if (res.code == "0000") {
          if(res.data>9999){
            this_.mutexProductLabel = "互斥商品（9999+）";
          }else{
            this_.mutexProductLabel = "互斥商品（"+res.data+"）";
          }
        }
      });
    },
    /**
     * 每页条数改变触发
     */
    handleSizeChangeMutexProductList(val){
      this.mutexProductForm.limit = val;
      this.mutexProductForm.start = 1;
      this.getMutexProductList();
    },
    /**
     * 换页刷新
     */
    handleCurrentChangeMutexProductList(val){
      this.merchantProductSearchForm.start = val;
      this.getMutexProductList();
    },

    /**
     * 互斥商品重新添加
     */
    renewAdd(row){
      let that = this;
      let param = {};
      var productIdList = [];
      param.promotionId = row.promotionId;
      param.promotionType = 2;
      if(row.typeOfProduct == '10'){
          //spu
          productIdList.push(row.id);
          row.children.forEach(item=>{
            productIdList.push(item.id);
          })
      }else if(row.typeOfProduct == '20'){
        productIdList.push(row.id);
      }
      param.productIdList = productIdList;
      this.utils.request.renewAddMutexProduct(param,res=>{
        if(res.code=='0000'){
          that.getMutexProductList();
          that.mainProductTableDataFormFind();
          let data = res.data;
          if(data.businessCode == '0001'){
              that.$message({message: data.businessMsg, type: "success"});
          }else if(data.businessCode == '0002'){
              that.$message({message:data.businessMsg, type: "error"})
          }else if(data.businessCode == '0003'){
              that.$alert(data.businessMsg, '提示', {
              confirmButtonText: '知道了',
              callback: action => {}
              });
          }
        }
      });
    },

    /**
     * 批量重新添加选择数据
     */
    batchRenewAddSelectionChange(val) {
      this.batchRenewAddSelection = val;
    },

    /**
     * 批量重新添加
     */
    batchRenewAdd(){

    },

    /**
     * 生效商品 互斥商品tab选中触发
     */
    productTabs(tab){
      if(tab.index==0){
        this.showButtons = true;
      }else{
        this.showButtons = false;
      }
    },
    /**
     * 互斥商品查看详情
     */
    getMutexInfo(row){
      let that = this;
      this.mutexPromotionForm.promotionMerchantProductId = row.id;
      this.getPromotionMutexListByProductId();
    },
    getPromotionMutexListByProductId(){
      let that = this;
      this.utils.request.getPromotionMutexListByProductId(this.mutexPromotionForm,res=>{
        if(res.code=='0000'){
            that.mutexPromotionList = res.data.rows;
            that.mutexPromotionListTotal = res.data.total;
            that.mutexPromotionVisible = true;
        }
      });
    },

    /**
     * 每页条数改变触发
     */
    mutexPromotionListSizeChange(val){

      this.mutexPromotionForm.limit = val;
      this.mutexPromotionForm.start = 1;
      this.getPromotionMutexListByProductId();
    },
    /**
     * 换页刷新
     */
    mutexPromotionListCurrentChange(val){

      this.mutexPromotionForm.start = val;
      this.getPromotionMutexListByProductId();
    },
    /**
     * 点击活动名称跳转详情
     */
    linkInfoByMutexProduct(promotionId,type){
      if(type == 1){
        this.$router.push({ path: "/SinglePromotionDetail/" + promotionId + "/0"});
        //this.$router.push(`/SinglePromotionDetail?id=${promotionId}&auth=0`);
      }else if(type == 2){
        this.$router.push(`/FullNumPromotionDetailNew?id=${promotionId}&auth=0`);
      }else if(type == 3){
        this.$router.push({ path: "/FullPromotionDetailNew/" + promotionId + "/0"});
        //this.$router.push(`/FullPromotionDetailNew?id=${promotionId}&auth=0`);
      }else if(type == 4){
        this.$router.push(`/SeckillDetail?promotionId=${promotionId}`);
      }else if(type == 5){
        this.$router.push({ path: "/GiftPromotionDetail/" + promotionId + "/0"});
        //this.$router.push(`/GiftPromotionDetail?id=${promotionId}&auth=0`);
      }else if(type == 6){
        this.$router.push({ path: "/ComplexPromotionInfo/" + promotionId});
      }else if(type == 7){
        this.$router.push({ path: "/XofferPromotionDetail/" + promotionId + "/0"});
        //this.$router.push(`/XofferPromotionDetail?id=${promotionId}&auth=0`);
      }else if(type == 8){
        this.$router.push({ path: "/IncreasePromotionDetail/" + promotionId + "/0"});
        //this.$router.push(`/IncreasePromotionDetail?id=${promotionId}&auth=0`);
      }else if(type == 9){
        this.$router.push(`/QueryPresellPromotion?value=${promotionId}&auth=0`);
      }else if(type == 10){
        this.$router.push("/GroupDetailPromotion?id=" + `${promotionId}`);
      }else if(type == 12){
        this.$router.push(`/QueryPromotion?value=${promotionId}&auth=0`);
      }
    }


  },
  created() {
    this.promotionId = this.$route.query.id;
    this.promotion.promotionId = this.promotionId ;

    this.themeDetailFind();

    this.getMerchantProductList();
    this.getMutexProductList();
  }
};
</script>

<style scoped lang="scss">
@import '../../../assets/css/public.scss';
.textcolor333{
  color:#333 !important
}
.ml48{
  margin-left: 48px !important;
}
.ml16{
  margin-left: 16px !important;
}
.ml81{
  margin-left: 81px !important;
}
.form-group-s{
  display: flex;
    justify-content: flex-start;
    font-size: 16px;
    margin-bottom: 30px !important;

    .color999 {
      // width: 114px;
      font-weight: normal;
      margin: 0 26px 0 0;
      text-align: right;
      color: #999;
      line-height: 1;
    }

    .color333 {
      font-size: 16px;
      color: #333 !important;
      line-height: 1;

      &,
      li {
        list-style: none;
      }
    }
}
.form-group {
    display: flex;
    justify-content: flex-start;
    font-size: 16px;
    margin-bottom: 30px !important;

    .color999 {
      width: 128px !important;
      font-weight: normal;
      margin: 0 26px 0 0;
      text-align: right;
      color: #999;
      line-height: 1;
    }

    .color333 {
      font-size: 16px;
      color: #333 !important;
      line-height: 1;

      &,
      li {
        list-style: none;
      }
    }
  }
  .basicInfo {
    text-align: left;
    font-size: 18px;
    color: #333;
    padding-top: 30px;
    margin: 30px 0 60px 0 !important;
    line-height: 1;

    &:first-child {
      padding-top: 10px;
    }
  }
  .ml8 {
    margin-left: 8px !important;
  }
  .w128{
    width: 128px;
  }
  .pdl48{
    padding-left:48px
  }
  .pdl30{
    padding-left: 30px;
  }
  .lh25{
    line-height: 25px;
  }
  .w144{
  width: 144px;
}
.oe{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.width100{
  width: 97px;
}
.width120{
  width: 150px;
}
.mr10{
  margin-right: 10px;
}
.mb10{
  margin-bottom: 10px;
}
.ml33{
  margin-left: 33px;
}
.pdl30{
  padding-left: 30px;
}
.pdt20{
  padding-top: 20px;
}
</style>
